<!--
 * @FileDescription 首页
 * @Author lz
 * @Date 20230117 15:03:05
 * @LastEditors lz
 * @LastEditTime 20230117 15:03:05
-->
<template>
    <div class="wp">
        <div class="loginImg"></div>
        <div class="loginBox">
            <h1>江苏省人社厅技能大赛</h1>
            <h6>WELCOME</h6>
            <a-form :model="formState" ref="formRef" name="normal_login" class="login-form" @finish="onFinish"
                @finishFailed="onFinishFailed" :rules=loginRules>
                <a-form-item label="" name="username">
                    <a-input v-model:value="formState.username" placeholder="请输入登录账号">
                        <template #prefix>
                            <UserOutlined class="site-form-item-icon" />
                        </template>
                    </a-input>
                </a-form-item>

                <a-form-item label="" name="password">
                    <a-input-password v-model:value="formState.password" placeholder="请输入登录密码">
                        <template #prefix>
                            <LockOutlined class="site-form-item-icon" />
                        </template>
                    </a-input-password>
                </a-form-item>

                <a-form-item>
                    <a-form-item name="remember" no-style>
                        <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
                    </a-form-item>
                    <div class="login-form-forgot" @click="forget">忘记密码?</div>
                </a-form-item>

                <a-button class="submitBtn" type="primary" @click="jumpTo">登录</a-button>
                <!-- <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" @click="jumpTo">登录</a-button>
                </a-form-item> -->
            </a-form>
        </div>

    </div>
</template>

<script setup lang="ts">

import { onMounted, ref, nextTick, reactive, toRaw } from 'vue';
import { useRouter } from 'vue-router'
import HomeContent from './HomeContent';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { loginToken } from '../../../api/login'
import { ElMessage } from 'element-plus'
const formRef = ref();

const router = useRouter()
function jumpTo() {
    formRef.value.validate().then(() => {
        // console.log('values', formState, toRaw(formState));
        loginToken({
            userName: formState.username,
            password: formState.password,
            codeKey: "43484db5-6b8d-483c-9298-8a49b0868f63",
            code: "tvg2"
        }).then((res: any) => {
            console.log(res.response, '++++++++++++++++++++++++++++')
            if (res.response) {
                HomeContent.Default.TOKEN = res.response.token
                router.push('AdminPageOne')
            } else {
            }

        })
    })
        .catch((error: any) => {
            console.log('error', error);

        });



}
function forget() {
    ElMessage.warning('请联系管理员')
}
interface FormState {
    username: string;
    password: string;
    remember: boolean;
}
const formState = reactive<FormState>({
    username: '',
    password: '',
    remember: true,
});
const loginRules = {
    username: [{ required: true, message: '请输入用户名' },
    { pattern: /^[A-Za-z0-9]{5,24}$/, message: '用户名由5至24位字母和数字组成' }],
    // { min: 5, max: 24, message: '用户名由5至24位字母和数字组成' }],
    password: [{ required: true, message: '请输入密码' },
    { min: 5, max: 24, message: '密码长度在5到24个字符之间' }],
}
const onFinish = (values: any) => {
    console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};

onMounted(async function () {
    //初始化链接
});

</script>

<style scoped>
.wp {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    background-color: #eef4ff;
}

.loginImg {
    width: 583px;
    height: 585px;
    position: absolute;
    top: 263px;
    left: 249px;
    background-color: pink;
    background: url('/public/images/车插画.png');
}

.loginBox {
    position: absolute;
    left: 1064px;
    top: 245px;
    width: 576px;
    height: 603px;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0px 12px 48px rgba(158, 195, 255, 0.51);
    /* text-align: center; */
}

h1 {
    font-weight: 500;
    font-size: 40px;
    letter-spacing: 3px;
    margin-top: 71px;
    margin-left: 77px;
    margin-bottom: 0px;
}

h6 {
    font-size: 16px;
    margin-top: 9px;
    margin-left: 260px;
    margin-bottom: 25px;
}

.site-form-item-icon {
    font-size: 22px;
    color: #81abff;
}

.login-form-forgot {
    float: right;
    color: #c9bfbf;
}

:deep().ant-form-item-control-input {
    margin-left: 56px;
    width: 470px;
    border-color: #e5e5e5;
}

:deep().ant-input-affix-wrapper>input.ant-input {
    height: 50px;
    font-size: 22px;
    border-left: 1px solid #f1f5fc;
    padding: 0 20px;
    margin-left: 9px;
}

:deep().ant-form-item-explain-error {
    margin-left: 55px;
}

:deep().ant-input-affix-wrapper {
    border-radius: 5px;
}

:deep().ant-input-prefix {
    margin: 0 8px;
}

.submitBtn {
    width: 468px;
    height: 58px;
    margin-left: 57px;
    border-radius: 5px;
    font-size: 22px;
    margin-top: 50px;
}

:deep().ant-checkbox+span {
    color: #c9bfbf;
}
</style>